import { SafetyOutlined, GlobalOutlined, TeamOutlined, RobotOutlined } from '@ant-design/icons';

const features = [
  {
    icon: <GlobalOutlined className="text-4xl text-blue-500" />,
    title: "生态保护",
    description: "致力于珊瑚礁生态系统的保护与修复"
  },
  {
    icon: <TeamOutlined className="text-4xl text-green-500" />,
    title: "社区互动",
    description: "支持用户分享经验，促进知识交流"
  },
  {
    icon: <SafetyOutlined className="text-4xl text-red-500" />,
    title: "教育创新",
    description: "提供深入浅出的珊瑚保护课程"
  },
  {
    icon: <RobotOutlined className="text-4xl text-purple-500" />,
    title: "智能问答",
    description: "AI驱动的专业知识解答系统"
  }
];

export default function Features() {
  return (
    <div className="py-16 bg-gray-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center">
          <h2 className="text-3xl font-bold text-gray-900 mb-8">平台特色</h2>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          {features.map((feature, index) => (
            <div
              key={index}
              className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300"
            >
              <div className="flex flex-col items-center">
                <div className="mb-4">{feature.icon}</div>
                <h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
                <p className="text-gray-600 text-center">{feature.description}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
} 